<template>
  <view>
    <view class="w100 pl-40 pr-40 rowsb rowsm h-82 bgff">
      <view class="" :class="{'fw-b fs-30 blue' : active == 0,'fs-28 col888' : active != 0}"
        @click="active = 0,setTitle('课程目录')">课程目录</view>
      <view class="" :class="{'fw-b fs-30 blue' : active == 1,'fs-28 col888' : active != 1}"
        @click="active = 1,setTitle('课程简介')">课程简介</view>
      <view class="" :class="{'fw-b fs-30 blue' : active == 2,'fs-28 col888' : active != 2}"
        @click="active = 2,setTitle('期末考试')">期末考试</view>
    </view>
    <view class="w100 pl-24 pr-24 pt-20" v-if="active == 0">
      <view class="" v-if="index == 0">
        <view class="w100 p-all-30 br-20 mb-20 rowsb rowsm" style="background-color: #fff;" v-for="(item,index) in list1"
          :key="index">
          <view class="rowscl">
            <view class="fw-b fs-30 col333 mb-24">第{{index + 1}}集</view>
            <view class="fs-30 col888">{{item.name}}</view>
          </view>
          <view class="rowscl rowsm">
            <view class="w-126 h-50 br-25 rowsc rowsm fs-24 colfff fw-b mb-28"
              style="background: linear-gradient(to bottom,#4897FF,#4878FF);"
              @click="$tools.goNext('/pages/course/video')">播放</view>
            <view class="fs-24 col888">进度{{item.num}}%</view>
          </view>
        </view>
      </view>
      
      <view class="" v-if="index == 1">
        <view class="w100 p-all-30 br-20 mb-20 rowsb rowsm" style="background-color: #fff;" v-for="(item,index) in list2"
          :key="index">
          <view class="rowscl">
            <view class="fw-b fs-30 col333 mb-24">第{{index + 1}}集</view>
            <view class="fs-30 col888">{{item.name}}</view>
          </view>
          <view class="rowscl rowsm">
            <view class="w-126 h-50 br-25 rowsc rowsm fs-24 colfff fw-b mb-28"
              style="background: linear-gradient(to bottom,#4897FF,#4878FF);"
              @click="$tools.goNext('/pages/course/video')">播放</view>
            <view class="fs-24 col888">进度{{item.num}}%</view>
          </view>
        </view>
      </view>
    </view>

    <view class="w100 p-all-20" v-if="active == 1">
      <view class="w100 br-12 pl-24 pr-24 pt-36 pb-36 fs-26 col000" style="background-color: #fff;" v-if="index == 0">
        <view class="w100 rowsb rowsm mb-72">
          <view class="">课程名称：{{info1.title}}</view>
          <view class="">课时:16课时</view>
        </view>
        <view class=" mb-60">团队介绍：{{info1.introduce}}</view>
        <view class="mb-60">选课人数：210人</view>
        <view class="">{{info1.content}}</view>
      </view>
      
      <view class="w100 br-12 pl-24 pr-24 pt-36 pb-36 fs-26 col000" style="background-color: #fff;" v-if="index == 1">
        <view class="w100 rowsb rowsm mb-72">
          <view class="">课程名称：{{info2.title}}</view>
          <view class="">课时:16课时</view>
        </view>
        <view class=" mb-60">团队介绍：{{info2.introduce}}</view>
        <view class="mb-60">选课人数：210人</view>
        <view class="">{{info2.content}}</view>
      </view>
    </view>

    <view class="pt-200 rowscl rowsm" v-if="active == 2">
      <view class="fw-b col333 fs-36 mb-40">期末考试时间为</view>
      <view class="fw-b col333 fs-36 mb-72">2024年12月25日-2025年1月5日</view>
      <view class="w-460 h-88 br-44 rowsc rowsm colfff fs-30"
        style="background: linear-gradient(to bottom,#4897FF,#4878FF);">确定</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        active: 0,
        index: 0,
        list1: [{
          name: '大勇不惧',
          num: 100
        }, {
          name: '大术无极',
          num: 100
        }, {
          name: '大巧破难',
          num: 100
        }, {
          name: '大艺法古',
          num: 20
        }],
        list2: [{
          name: '劳动教育概论',
          num: 100
        }, {
          name: '劳动教育与德育',
          num: 60
        }, {
          name: '劳动教育与智育',
          num: 0
        }, {
          name: '劳动教育与体育',
          num: 0
        }],
        info1: {
          title: '大国工匠',
          content: '课程简介:《大国工匠》是央视新间频道2015年4月29日起推出的“五一“特别报道，介绍了8位一线工人的高翃技艺和执着坚守。火箭心脏焊接人高凤林、堅刻大师孟剑锋、双丝钳工顾秋亮、航天手艺人胡双钱、殷瓦焊接工张冬伟、高铁首席研磨师宁允展、深海钳工管延安、捞纸工周东红。这系列节目讲述了不同岗位劳动者用自己的灵巧双手，匠心筑梦的故事。',
          introduce: '高凤林、孟剑锋、顾秋亮、胡双钱、张冬伟、宁允展、管延安、周东红'
        },
        info2: {
          title: '新时代大学生劳动教育',
          content: '把握育人导向，遵循教育规律，体现时代特征。树立正确的劳动观，崇尚劳动、尊重劳动，报效国家，奉献社会。劳动最光荣，劳动最崇高，劳动最伟大，劳动最美丽。',
          introduce: '叶耀辉、黄鑫、郑海珍、路玲、江黎、马越兴、陈海丹、舒丽芳、邓敏芝'
        }
      };
    },
    onLoad(e) {
      this.index = e.index
      if(e.active) this.active = e.active
    },
    methods: {
      setTitle(title) {
        uni.setNavigationBarTitle({
          title: title
        })
      }
    }
  }
</script>

<style lang="scss">
  .blue {
    color: #4878FF;
  }

  page {
    // background-color: #fff;
  }
</style>